import { Link, Outlet } from "umi";
import styles from "./index.less";
import { RoleEnum } from "@/constants/role";
import { LogoutOutlined } from "@ant-design/icons";

const userInfo = JSON.parse(localStorage.getItem("userInfo") || "{}");

export default function Layout() {
  return (
    <div>
      <div className={styles.navs}>
        <ul>
          <li>
            <Link to="/">首页</Link>
          </li>
          <li>
            <Link to="/student">学生管理</Link>
          </li>

          {userInfo.role === RoleEnum.ADMIN && (
            <li>
              <Link to="/teacher">教师管理</Link>
            </li>
          )}
          {userInfo.role === RoleEnum.ADMIN && (
            <li>
              <Link to="/admin">管理员管理</Link>
            </li>
          )}

          <li>
            <Link to="/subject">课程管理</Link>
          </li>
          <li>
            <Link to="/task">任务管理</Link>
          </li>
          <li>
            <Link to="/subject-student">学生选课管理</Link>
          </li>

          <li style={{ marginLeft: "auto" }}>
            <Link
              to="/login"
              onClick={() => {
                localStorage.removeItem("token");
              }}
            >
              <LogoutOutlined />
            </Link>
          </li>
        </ul>
      </div>
      <div className={styles.mainLayout}>
        <div className={styles.content}>
          <Outlet />
        </div>
      </div>
    </div>
  );
}
